import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Appearance,
  Image,
  TouchableOpacity,
} from 'react-native';
import {connect} from 'react-redux';
import {NavigationContext} from '@react-navigation/native';
import PropTypes from 'prop-types';
import {pxToDp} from '../../../../utils/stylesKits';
import {dark, light} from '../../../../config';

/**
 * APP ArticleItem 页面
 * @colorScheme 用户手机主题模式 是否开启了黑夜模式
 * */

const colorScheme = Appearance.getColorScheme() === 'dark' ? dark : light;

class ArticleItem extends Component {
  static contextType = NavigationContext;
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {}

  componentDidUpdate(prevProps, prevState) {}

  componentWillUnmount() {}

  render() {
    const {article} = this.props;
    return (
      <TouchableOpacity
        style={styles.container}
        onPress={() =>
          this.context.navigate('ArticleDetali', {articleId: article.id})
        }>
        <Text style={styles.title}>{article.title}</Text>
        <View style={styles.articeInfo}>
          <View style={styles.articeInfoLeft}>
            <View style={styles.articeUser}>
              <Text style={styles.articeUserNickname}>
                {article.user.nickname}
              </Text>
              <Text style={styles.articeCreatetime}>{article.create_time}</Text>
            </View>
            <Text
              style={styles.summary}
              numberOfLines={3}
              ellipsizeMode={'tail'}>
              {article.summary}
            </Text>
          </View>
          <Image
            style={styles.coverImage}
            source={{uri: article.cover_image}}
          />
        </View>
      </TouchableOpacity>
    );
  }
}

const mapStateToProps = state => ({});
const mapDispatchToProps = {};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: pxToDp(140),
    padding: pxToDp(12),
    marginTop: pxToDp(10),
    overflow: 'hidden',
    backgroundColor: colorScheme.backgroundColor,
  },
  title: {
    marginBottom: pxToDp(5),
    fontSize: pxToDp(20),
    fontWeight: '800',
  },
  articeInfo: {
    flexDirection: 'row',
    width: '100%',
  },
  coverImage: {
    width: pxToDp(100),
    height: pxToDp(80),
    borderRadius: pxToDp(5),
    marginLeft: pxToDp(5),
  },
  articeInfoLeft: {
    flex: 1,
  },
  articeUser: {
    flexDirection: 'row',
    opacity: 0.8,
  },
  articeUserNickname: {
    paddingRight: pxToDp(15),
    borderRightWidth: pxToDp(1),
    borderColor: colorScheme.color,
    opacity: 0.6,
  },
  articeCreatetime: {
    paddingLeft: pxToDp(15),
  },
  summary: {
    height: pxToDp(55),
    marginTop: pxToDp(5),
    opacity: 0.8,
  },
});
ArticleItem.propTypes = {
  article: PropTypes.object.isRequired,
};
export default connect(mapStateToProps, mapDispatchToProps)(ArticleItem);
